<template>
  <div class="profile-container">
    <div class="page-header">
      <h1>个人资料</h1>
    </div>
    
    <el-row :gutter="20">
      <el-col :xs="24" :md="8">
        <el-card class="user-info-card">
          <div class="avatar-container">
            <el-avatar :size="100" icon="el-icon-user" />
            <h2>{{ user.username }}</h2>
            <p>{{ user.email }}</p>
          </div>
          
          <div class="user-meta">
            <div class="meta-item">
              <span class="meta-label">角色</span>
              <span class="meta-value">{{ user.role === 'admin' ? '管理员' : '普通用户' }}</span>
            </div>
            <div class="meta-item">
              <span class="meta-label">注册时间</span>
              <span class="meta-value">{{ formatDate(user.created_at) }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :md="16">
        <el-card class="statistics-card">
          <template #header>
            <div class="card-header">
              <h3>健康数据统计</h3>
            </div>
          </template>
          
          <el-row :gutter="20">
            <el-col :xs="12" :sm="8">
              <div class="stat-box">
                <el-icon><DataLine /></el-icon>
                <div class="stat-info">
                  <span class="stat-value">{{ statistics.healthDataCount }}</span>
                  <span class="stat-label">健康数据</span>
                </div>
              </div>
            </el-col>
            
            <el-col :xs="12" :sm="8">
              <div class="stat-box">
                <el-icon><Document /></el-icon>
                <div class="stat-info">
                  <span class="stat-value">{{ statistics.healthReportsCount }}</span>
                  <span class="stat-label">健康报告</span>
                </div>
              </div>
            </el-col>
            
            <el-col :xs="12" :sm="8">
              <div class="stat-box">
                <el-icon><Refresh /></el-icon>
                <div class="stat-info">
                  <span class="stat-value">{{ statistics.lastEntryDays }}</span>
                  <span class="stat-label">最近更新(天)</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
        
        <el-card class="health-tips-card">
          <template #header>
            <div class="card-header">
              <h3>健康小贴士</h3>
            </div>
          </template>
          
          <div class="health-tips">
            <div v-for="(tip, index) in healthTips" :key="index" class="tip-item">
              <el-icon><InfoFilled /></el-icon>
              <span>{{ tip }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { computed, ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { DataLine, Document, Refresh, InfoFilled } from '@element-plus/icons-vue'

export default {
  name: 'UserProfile',
  components: {
    DataLine,
    Document,
    Refresh,
    InfoFilled
  },
  setup() {
    const store = useStore()
    
    const user = computed(() => store.getters['auth/user'] || {})
    
    const statistics = reactive({
      healthDataCount: 0,
      healthReportsCount: 0,
      lastEntryDays: 0
    })
    
    const healthTips = ref([
      '每天保持充分的水分摄入，建议饮水量为1.5-2升。',
      '均衡饮食对健康至关重要，每餐应包含各种食物类型。',
      '每周至少进行150分钟的中等强度有氧运动。',
      '保持良好的睡眠习惯，成年人每晚应睡7-9小时。',
      '定期进行健康检查，及早发现潜在健康问题。'
    ])
    
    const formatDate = (dateString) => {
      if (!dateString) return '未知'
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    }
    
    // 计算最后更新距今天数
    const calculateLastEntryDays = (data) => {
      if (!data || data.length === 0) return '未知'
      
      const dates = data.map(item => new Date(item.created_at))
      const latestDate = new Date(Math.max(...dates))
      const today = new Date()
      
      const diffTime = Math.abs(today - latestDate)
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
      
      return diffDays
    }
    
    // 获取数据统计
    const fetchStatistics = async () => {
      try {
        // 获取健康数据
        const healthData = await store.dispatch('healthData/fetchHealthData')
        statistics.healthDataCount = healthData.length
        
        // 获取健康报告
        const healthReports = await store.dispatch('healthReports/fetchReports')
        statistics.healthReportsCount = healthReports.length
        
        // 计算最后更新时间
        const allData = [...healthData, ...healthReports]
        statistics.lastEntryDays = calculateLastEntryDays(allData)
      } catch (error) {
        console.error('获取统计数据失败:', error)
      }
    }
    
    onMounted(() => {
      fetchStatistics()
    })
    
    return {
      user,
      statistics,
      healthTips,
      formatDate
    }
  }
}
</script>

<style scoped>
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  color: #409EFF;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-container h2 {
  margin: 10px 0 5px;
}

.avatar-container p {
  margin: 0;
  color: #606266;
}

.user-meta {
  margin-top: 20px;
}

.meta-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
}

.meta-item:last-child {
  border-bottom: none;
}

.meta-label {
  color: #909399;
}

.meta-value {
  font-weight: bold;
}

.statistics-card {
  margin-bottom: 20px;
}

.card-header h3 {
  margin: 0;
  color: #409EFF;
}

.stat-box {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  background-color: #f5f7fa;
  margin-bottom: 15px;
}

.stat-box .el-icon {
  font-size: 30px;
  color: #409EFF;
  margin-right: 15px;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
}

.stat-label {
  color: #909399;
  font-size: 14px;
}

.health-tips {
  padding: 0 10px;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.tip-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.tip-item .el-icon {
  color: #409EFF;
  margin-right: 10px;
  margin-top: 2px;
}
</style> 